<template>
  <el-card>
    <div slot="header">当前在线用户</div>
    <ul class="user-list-ul">
      <!-- 当前用户项 -->
      <li v-if="currentUser" class="user-item self-user">
        <UserAvatar
          :src="currentUser.avatar"
          size="medium"
          :uploadable="false"
        />
        <span style="margin-left: 10px;">{{ currentUser.nickname || currentUser.username }}</span>
        <el-tag type="success" size="mini" style="margin-left: 8px;">我</el-tag>
      </li>

      <!-- 其他用户项 -->
      <template v-if="filteredUserList.length > 0">
        <li
          v-for="(user, index) in filteredUserList"
          :key="index"
          class="user-item"
        >
          <UserAvatar
            :src="user.avatar"
            size="medium"
            :uploadable="false"
          />
          <span style="margin-left: 10px;">{{ user.username }}</span>
        </li>
      </template>

      <!-- 加载中提示 -->
      <li v-else-if="loading" class="user-item empty-tip">
        正在加载用户列表...
      </li>

      <!-- 空状态提示 -->
      <li v-else class="user-item empty-tip">
        暂无其他在线用户
      </li>
    </ul>
  </el-card>
</template>

<script>
import UserAvatar from '@/components/UserAvatar.vue';
import { mapGetters } from 'vuex';

export default {
  name: 'UserList',
  components: { UserAvatar },
  data() {
    return {
      loading: false,
    };
  },
  computed: {
    currentUser() {
      const user = this.$store.state.user;
      if (user && Object.keys(user).length > 0) {
        console.log('当前用户:', user); // 调试信息
        return {
          ...user,
          username: user.username || user.name || '匿名用户'
        };
      }
      return null;
    },
    ...mapGetters(['getUserList']),
    filteredUserList() {
      const currentUser = this.currentUser;

      // ✅ 这里要处理的是对象数组，而不是字符串数组
      if (!this.getUserList || !Array.isArray(this.getUserList)) return [];

      return this.getUserList.filter(user => {
        // ✅ 假设每个用户对象有 username 字段
        return (
          user &&
          typeof user.username === 'string' &&
          user.username.trim().length > 0 &&
          user.username !== currentUser?.username
        );
      });
    }
  },
  mounted() {
    console.log('UserList 组件已挂载');
    console.log('获取到的用户列表:', this.getUserList);

    // 👇 新增调试打印：查看 JSON 格式数据
    const plainUserList = this.getUserList.map(u => ({
      username: u.username,
      avatar: u.avatar,
      isBanned: u.isBanned
    }));
    console.log('JSON 格式用户列表:', JSON.stringify(plainUserList, null, 2));
  }
};
</script>

<style scoped>
.user-list-ul {
  list-style: none;
  padding-left: 0;
}

.user-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.user-item:hover {
  background-color: #f0f2f5;
}

/* 自己的用户样式 */
.self-user {
  background-color: #e6f7ff !important;
  font-weight: bold;
}

.empty-tip {
  color: #999;
  font-size: 13px;
  justify-content: center;
  padding-top: 10px;
}
</style>